The Rating control provides an intuitive rating experience that allows users to select the number of stars that represents their rating. The page designer can specify the initial rating, the maximum rating to allow.
Rating Properties:
· AutoPostBack - True to cause a postback on rating item click.
· CurrentRating - Initial rating value
· MaxRating - Maximum rating value
· ReadOnly - Whether or not the rating can be changed
· StarCssClass - CSS class for a visible star
· WaitingStarCssClass - CSS class for a star in waiting mode
· FilledStarCssClass - CSS class for star in filled mode
· EmptyStarCssClass - CSS class for a star in empty mode
· RatingAlign - Alignment of the stars (Vertical or Horizontal)
· RatingDirection - Orientation of the stars.
· OnChanged - ClientCallBack event to fire when the rating is changed
Code:
Default.aspx
<%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages.This enables partial-page rendering and Web-service calls.You have to used this if you want to use ajax control toolkit--%>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<cc1:Rating ID="Rating1" runat="server" MaxRating="5" CurrentRating="2" CssClass="rstar" StarCssClass="ritem" WaitingStarCssClass="svd" FilledStarCssClass="fld" EmptyStarCssClass="empt" AutoPostBack="True" OnChanged="Rating1_Changed">
</cc1:Rating>
<asp:Label ID="Label2" runat="server" Text="Selected value:"></asp:Label>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
Here CurrentRating="2" so current star rating will be 2. StarCssClass="ratingItem" ratingItem is defined inStyleSheet.css. WaitingStarCssClass="Saved" saved isdefined inStyleSheet.css. FilledStarCssClass="Filled" filled is defined inStyleSheet.css .
Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
const int rt_min = 1;
const int rt_max = 5;
protected void Page_Load(object sender, EventArgs e)
{
if( !IsPostBack )
{
Rating(Rating1.CurrentRating);
}
}
protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
Rating(int.Parse(e.Value));
}
public void Rating(int value) {
Label1.Text = "Selected value " + evalRating(value, Rating1.MaxRating, rt_min, rt_max);
}
public static string evalRating(int value, int maxvalue, int minrange, int maxrange)
{
int stepDelta = (minrange==0) ? 1 : 0;
double delta = (double)(maxrange - minrange) / (maxvalue - 1);
double result = delta * value - delta * stepDelta;
return formatRes(result);
}
public static string formatRes(double value)
{
return String.Format("{0:g}", value);
}
}
StyleSheet.css
We apply these style sheet in default.aspx page by using link tag
.rstar
{
white-space:nowrap;
margin:1em;
height:14px;
}
.rstar .ritem {
font-size: 0pt;
width: 13px;
height: 12px;
margin: 0px;
padding: 0px;
display: block;
background-repeat: no-repeat;
cursor:pointer;
}
.rstar .fld {
background-image: url(images/ratingStarFilled.png);
}
.rstar .empt {
background-image: url(images/ratingStarEmpty.png);
}
.rstar .svd {
background-image: url(images/ratingStarSaved.png);
}
Run the project
When you select the star then rating value will show
Leave Comment